<template>
  <div class="item-bg" style="width: 100%; height: 100%">
    <span class="title">{{ lsxm }}评阅详情</span>
    <a-row class="search">
      <SearchGroup
        :labelOption="labelOption"
        @handleSearch="loadData(1)"
        @handleReset="reset"
        :searchOption="filterOption"
        :resetHidden="false"
      />
    </a-row>
    <a-table
      :loading="loading"
      :row-selection="{
        selectedRowKeys: selectedRowKeys,
        onChange: onSelectChange,
      }"
      class="tabsty"
      rowKey="id"
      :pagination="false"
      :columns="columns"
      :scroll="{ y: 'calc(100vh - 580px)', x: 2000 }"
      :data-source="list"
      size="small"
      bordered
    >
      <template v-slot:bodyCell="{ column, text, record, index }">
        <template v-if="column.dataIndex == 'index'">
          <span>{{ (curPage - 1) * pageSize + (index + 1) }}</span>
        </template>

        <template v-if="column.dataIndex == 'pgzt'">
          <span v-if="record.pgzt == 1">待评</span>
          <span v-else-if="record.pgzt == 2">评阅中</span>
          <span v-else-if="record.pgzt == 3" style="color: #389e0c">已阅</span>
          <span v-else>-</span>
        </template>
        <template v-if="column.dataIndex == 'operation'">
          <span style="color: #136cc4; cursor: pointer" @click="toSee(record)"> 试题评阅详情 </span>
        </template>
        <template v-if="column.dataIndex == 'pyGcZt' && record.isYc">
          <span style="color: red"> {{ record.ycXxDesc }} </span>
        </template>
        <template v-if="column.dataIndex == 'tmDf' && record.isYc">
          <span style="color: red"> {{ text }}(异常) </span>
        </template>
      </template>
    </a-table>
    <a-pagination
      class="pagination"
      :show-total="total => `共 ${total} 条`"
      :show-size-changer="false"
      show-quick-jumper
      v-model:current="curPage"
      v-model:pageSize="pageSize"
      :total="total"
    />
    <a-modal
      v-model:visible="visible"
      title="异常重评"
      @ok="markAbnormalByTeacher"
      okText="提交"
      @cancel="handelClose"
    >
      <a-form ref="form" :model="formStore" class="form">
        <a-form-item name="pjls" label="评阅教师">
          <a-input v-model:value="lsxm" disabled></a-input>
        </a-form-item>
        <a-form-item
          label="异常原因"
          name="describe"
          :labelCol="{ span: '4' }"
          :rules="[{ required: true, message: '异常描述不能为空' }]"
        >
          <a-textarea
            v-model:value="formStore.describe"
            placeholder="请输入异常重评的原因..."
            :rows="4"
          />
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>
<script lang="ts" setup>
import { onMounted, ref, watch } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { useList } from '/@/hooks/web/useList'
import { markYcForPjls } from '/@/api/examinationAudit'
import { getfindHadPaperList } from '/@/api/qualityInspection'
import { useMessage } from '/@/hooks/web/useMessage'

import dayjs from 'dayjs'
import duration from 'dayjs/plugin/duration'
dayjs.extend(duration)

const props = defineProps({
  seleArr: {
    type: Array,
    default: '',
  },
  activeKey: {
    type: String,
    default: '',
  },
})
watch(
  () => props.activeKey,
  e => {
    // filterOption.value.jsXxId=props.activeKey;
    loadData()
  }
)

const { createMessage } = useMessage()

const formStore = ref({})
const form = ref()
const visible = ref(false)

const handelClose = () => {
  visible.value = false
  formStore.value.describe = ''
}

const router = useRouter()
const route = useRoute()
const lsxm = ref(route.query.name)

const labelOption = ref([
  {
    name: '教师工号',
    key: 'jsXxId',
    labelWidth: 120,
    inputWidth: 180,
  },
])

// 选中状态
const selectedRowKeys = ref([])
const onSelectChange = val => {
  selectedRowKeys.value = val
}


const { reset, loadData, filterOption, curPage, total, pageSize, list, loading } = useList(
  getfindHadPaperList,
  {
    defaultFilterOption: {
      kmYear: route.query.kmYear,
      kmpyzt: route.query.Kmpyzt,
      kmdm: route.query.kmdm,
      stLx: route.query.stLx,
    },
  }
)

const columns = ref([
  {
    title: '序号',
    dataIndex: 'index',
    key: 'index',
    align: 'center',
    width: 60,
    fixed: true,
  },
  {
    title: '评阅题型',
    dataIndex: 'stLx',
    key: 'stLx',
    align: 'center',
  },
  {
    title: '一级标题',
    dataIndex: 'firstLevelTitle',
    key: 'firstLevelTitle',
    align: 'center',
  },
  {
    title: '子集标题',
    dataIndex: 'secondaryTitle',
    key: 'secondaryTitle',
    align: 'center',
  },
  {
    title: '评卷开始时间',
    dataIndex: 'ksdfTime',
    key: 'ksdfTime',
    align: 'center',
    width: 200,
  },
  {
    title: '评卷结束时间',
    dataIndex: 'tjTime',
    key: 'tjTime',
    align: 'center',
    width: 200,
  },
  {
    title: '评卷时长',
    dataIndex: 'pySc',
    key: 'pySc',
    align: 'center',
    customRender: ({ text }) => {
      let time = +new Date('2023-01-01') + 1000 * text
      return dayjs.duration(time || 1000).format('HH:mm:ss')
    },
  },

  {
    title: '题目总分',
    dataIndex: 'tmMf',
    key: 'tmMf',
    align: 'center',
  },
  {
    title: '题目评分',
    dataIndex: 'tmDf',
    key: 'tmDf',
    align: 'center',
  },

  {
    title: '操作',
    dataIndex: 'operation',
    align: 'center',
    width: 150,
    fixed: 'right',
  },
])
//查看试卷
const toSee = row => {
  router.push({
    name: `ReviewPaper`,
    query: {
      id: row.id,
      kmpyzt: route.query.Kmpyzt,
      hiddenbutton: true,
    },
  })
}

// 标记教师异常
const markAbnormalByTeacher = async () => {
  await form.value.validate('describe')
  markYcForPjls({
    pjls: route.query.pjls,
    km: route.query.km,
    describe: formStore.value.describe,
  }).then(res => {
    if (res.code == 1) {
      createMessage.info('标记异常成功')
    } else {
      createMessage.error(res.message)
    }
    handelClose()
  })
}
onMounted(async () => {
  
})
</script>
<style lang="less" scoped>
.item-bg {
  display: flex;
  flex-direction: column;
  background: #ffffff;
  box-shadow: 0px 0px 6px 1px rgba(128, 144, 219, 0.16);
  border-radius: 6px 6px 6px 6px;
  position: relative;

  .title {
    width: 100%;
    padding: 16px;
    font-weight: bold;
    color: #3f4355;
    font-size: 16px;
    font-family: PingFang SC-Bold, PingFang SC;
    border-bottom: 2px solid #f0f1f8;
  }
}

.search {
  padding: 0 15px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.tabsty {
  margin: 10px 0;
}

.pagination {
  padding: 10px 0 0 20px;
}

.form {
  padding: 20px;
}
</style>
<style lang="less">
.teacherList {
  .ant-table-thead > tr > th {
    background: #f2f2f2 !important;
  }
}
</style>
